import classNames from "classnames";
import React from "react";
import { createUseStyles } from "react-jss";
import { TreeNodeProps } from "../type";

export default function TreeNode({
  title,
  isAll,
  isChecked,
  disableChecked = false,
  onCheck,
}: TreeNodeProps) {
  const classes = useStyles();
  return (
    <label
      className={classNames(
        classes.treeNode,
        disableChecked && classes.disable
      )}
      onClick={() => {
        if (disableChecked) return;
        onCheck?.(!(isAll && isChecked));
      }}
    >
      <span
        className={classNames(
          classes.checkbox,
          isAll && isChecked && classes.checked,
          !isAll && isChecked && classes.half
        )}
      ></span>
      <span className={classes.label}>{title}</span>
    </label>
  );
}

const useStyles = createUseStyles({
  treeNode: {
    cursor: "pointer",
    display: "flex",
    alignItems: "center",
  },
  checkbox: {
    display: "inline-block",
    width: "14px",
    height: "14px",
    border: "1px solid #D9D9D9",
    boxSizing: "border-box",
    transition: "all 0.3s",
    backgroundColor: "#fff",
    position: "relative",
    "&:after": {
      position: "absolute",
      display: "table",
      content: "' '",
      transition:
        " all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s",
    },
  },
  checked: {
    backgroundColor: "#037aff",
    borderColor: "#037aff",
    "&:after": {
      top: "2px",
      left: "4px",
      width: "3px",
      height: "6px",
      border: "1px solid #fff",
      content: "' '",
      transform: "rotate(45deg) scaleY(1)",
      borderLeft: 0,
      borderTop: 0,
    },
  },
  half: {
    backgroundColor: "#037aff",
    borderColor: "#037aff",
    "&:after": {
      width: "8px",
      height: "1px",
      backgroundColor: "#fff",
      top: "5.5px",
      left: "2px",
    },
  },
  label: {
    lineHeight: "22px",
    marginLeft: "8px",
  },
  disable: {
    cursor: "no-drop",
    opacity: "0.75",
  },
});
